<template>
	<view class="content padding flex flex-direction align-center ">
		<view class="img flex align-center justify-center" v-if="0">
			<image src="" mode="" class="bg-gradual-green"></image>
		</view>
		<text class="text-xxl text-bold margin-top">核销码</text>
		<button class="cu-btn btn">{{ add(user_code) }}</button>
		<text class="tip">提示：输入优惠券码进行核销</text>
		<button class="cu-btn btn" @click="showModal = true">核销优惠券</button>
		<shopro-modal v-model="showModal" style="z-index: 88;">
			<block slot="modalContent">
				<view class="modal-box">
					<view class="modal-head">
						<image
							class="modal-head-img"
							src="http://shopro.7wpp.com/imgs/modal_bg.png"
							mode=""
						></image>
						<text class="modal-head-title">核销</text>
					</view>
					<input
						class="inp"
						type="number"
						v-model="user_code"
						placeholder="请输入核销码"
						placeholder-class="pl-inp"
					/>

					<button class="cu-btn post-btn" @tap="postMoney">确认核销</button>
				</view>
			</block>
		</shopro-modal>
	</view>
</template>

<script>
const app = getApp();
import shoproModal from '../../components/shopro-modal/shopro-modal.vue';
export default {
	components: {
		shoproModal
	},
	data() {
		return {
			showModal: false,
			user_code: '',
			id:''
		};
	},
	methods: {
		async name() {
			return (this.num -= 1);
		},
		async copy(e) {
			uni.setClipboardData({
				data: e + '',
				success: function() {}
			});
		},
		postMoney() {
			if (!this.user_code) return this.$refs.uToast.show({ title: '请输入核销码~~', type: 'error' });
			app.globalData.api.checkCoupon({ userCode: this.user_code }).then(res => {
				if (res.code == 200) {
					console.log('res: ', res);
					app.globalData.api.useCoupon({ id: this.id }).then(ress => {
						console.log('ress: ', ress);
						this.$refs.uToast.show({ title: ress.resultObj, type: 'success' });

						[this.showModal, ] = [false, ];
						// [this.couponsInfo, this.page] = [[], 1];
						
					});
				} else {
					this.$refs.uToast.show({ title: '无法进行核销~~', type: 'error' });
				}
			});
		},
		add(user_code) {
			let str =
				(user_code + '').slice(0, 4) +
				'-' +
				(user_code + '').slice(4, 8) +
				'-' +
				(user_code + '').slice(8, 12);

			return str;
		}
	},
	onLoad(e) {
		console.log('e :>> ', e);
		this.user_code = e.user_code;
		this.id = e.id;
	}
};
</script>

<style lang="scss" scoped>
.content {
	.modal-box {
		background: #fff;
		width: 610rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		.modal-head-img {
			width: 100%;
			height: 213rpx;
		}

		.modal-head-title {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #6d5028;
			line-height: 42rpx;
		}

		.inp {
			width: 501rpx;
			height: 78rpx;
			border: 1rpx solid rgba(168, 112, 13, 1);
			// margin: 60rpx auto 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6d5028;

			.pl-inp {
				color: #bd9560;
			}
		}

		.radio {
			width: 500rpx;
			padding: 0 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(200, 150, 61, 1);
			margin-bottom: 20rpx;

			.radio-inp {
				transform: scale(0.7);
				margin-right: 10rpx;
			}
		}

		.post-btn {
			width: 492rpx;
			height: 70rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			padding: 0;
			margin-bottom: 60rpx;
			margin-top: 30rpx;
		}
	}
	.img {
		width: 300rpx;
		height: 300rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin-top: 109rpx;
		image {
			width: 260rpx;
			height: 260rpx;
			border-radius: 10rpx;
		}
	}
	.btn {
		width: 600rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #f8ce39, #ffe791);
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 28rpx;
	}
	.tip {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-top: 40rpx;
	}
}
</style>
